<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="community-container">
    <div class="title">专题社区</div>
    <div class="text">在这里，您可以了解到关于宠物和平台的更多</div>
    <!-- 专题列表 -->
    <div class="topics-table">
    
      <div v-for="topic in paginatedList" :key="topic.topicId" class="topics-item">
        <el-card class="topic-card" @click="clickTopic(topic.topicId)">
          <div class="topic-info">
            <h3>{{ topic.topicName }}</h3>
            <p>{{ topic.topicDescription }}</p>
          </div>
        </el-card>
      </div>
    </div>

    <!-- 分页器 -->
    <div class="pagination-container">
      <!-- 上一页按钮 -->
      <span v-if="currentPage > 1" class="pagination-button" @click="prevPage">上一页</span>
      <span v-for="page in totalPages" :key="page" :class="{
        'pagination-button': true,
        'active': page === currentPage,
        'disabled': page === currentPage && (currentPage === 1 || (currentPage * itemsPerPage) >= TopicsData.length)
      }" @click="() => changePage(page)">
        {{ page }}
      </span>
      <span v-if="(currentPage * itemsPerPage) < TopicsData.length" class="pagination-button" @click="nextPage">下一页</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { getTopicsListAPI} from "@/api/community"
import { ref, onMounted,computed } from "vue"
import { useRouter } from "vue-router"

const router = useRouter();

const ListData = ref([]);
// 渲染在表格的数据：
const TopicsData = ref([])
// 专题列表接口
const getTopicsList = async () => {
    const res = await getTopicsListAPI();
    ListData.value = res
    TopicsData.value = ListData.value.filter(item => item.status === 1);
    console.log("筛选后的数据：", TopicsData.value);
};


// 当前页码，初始为1
const currentPage = ref(1)
// 每页显示的宠物项数量
const itemsPerPage = 8
// 计算总页数
const totalPages = computed(() => {
  const length = TopicsData.value.length;
  console.log("总数据量：", length); // 新增此行
  return Math.ceil(length / itemsPerPage);
});
// 计算当前页显示的宠物项数据
const paginatedList = computed(() => {
  const startIndex = (currentPage.value - 1) * itemsPerPage
  const endIndex = startIndex + itemsPerPage
  return TopicsData.value.slice(startIndex, endIndex)
})
// 下一页方法
const nextPage = () => {
  if ((currentPage.value * itemsPerPage) < TopicsData.value.length) {
    currentPage.value++
  }
}

// 上一页方法
const prevPage = () => {
  if (currentPage.value > 1) {
    currentPage.value--
  }
}

// 页码点击跳转方法
const changePage = (page: number) => {
  if (page >= 1 && page <= totalPages.value) {
    currentPage.value = page
  }
}

const clickTopic = async (topicid) => {
    console.log("点击小卡,专题ID:", topicid);
    router.push(`/article/${topicid}`);

};
onMounted(() => {
    getTopicsList();
});
</script>

<style lang="scss" scoped>
.community-container {
    max-width: 1200px;
    width: 1200px;
    height: 650px;
    margin: 0 auto;
    padding: 30px;
     position: relative;
      background: rgba(204, 204, 204, 0.2);
    // border: 1px solid black;
}
.topics-table{

    width: 900x;
    margin: 0 auto;
    // border: 1px solid black;
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    
}
.topics-item{
    width: calc((100% - 60px) / 3);
}
.title{
    font-size: 25px;
    font-weight: bold;
    text-align: center;

}
.text{
    text-align: center;
    font-size: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
}
.topic-card {
  transition: all 0.3s ease;
  transform: translateY(0); 
}

.topic-card:hover {
  transform: translateY(-3px); 
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2); 
}
.topic-card:active {
  transform: translateY(0); 
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.pagination-container{
    position: absolute;
  right: 60px;
  bottom: 60px;
}
</style>